<template>
  <div class="member_box">
    <h1>会员列表</h1>

    <!-- 新增会员 -->
    <el-button type="info" class="member_btn" @click="addMemberVisible = true">新增会员</el-button>

    <!-- 新增会员弹框 -->
    <el-dialog v-model="addMemberVisible" title="新增会员">
      <el-form :model="addMemberData" :rules="rules">
        <el-form-item label="姓名" :label-width="formLabelWidth" prop="name">
          <el-input autocomplete="off" v-model="addMemberData.name" />
        </el-form-item>
        <el-form-item label="电话" :label-width="formLabelWidth" prop="tel">
          <el-input autocomplete="off" v-model="addMemberData.tel" />
        </el-form-item>
        <el-form-item label="车牌号" :label-width="formLabelWidth" prop="carnumber">
          <el-input autocomplete="off" v-model="addMemberData.carnumber" />
        </el-form-item>
        <el-form-item label="租赁月数" :label-width="formLabelWidth" prop="months">
          <el-input autocomplete="off" v-model="addMemberData.months" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="addMemberVisible = false" type="info" plain>取消</el-button>
          <el-button type="info" @click="addMemberFn">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 搜索管理员 -->
    <el-form :inline="true" :model="searchData" class="demo-form-inline">
      <el-form-item label="车牌号">
        <el-input placeholder="请输入车牌号" v-model="searchData.carnumber" clearable />
      </el-form-item>
      <el-form-item label="电话">
        <el-input placeholder="请输入电话" v-model="searchData.tel" clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="info" @click="searchFn">搜索</el-button>
      </el-form-item>
    </el-form>

    <!-- 会员列表 -->
    <el-table :data="memberData" style="width: 100%">
      <el-table-column type="index" width="80" label="序号" />
      <el-table-column prop="id" label="id" />
      <el-table-column prop="name" label="姓名" />
      <el-table-column prop="tel" label="电话" />
      <el-table-column prop="carnumber" label="车牌号" />
      <el-table-column prop="months" label="租赁月数" />
      <el-table-column prop="starttime" label="开始时间" />
      <el-table-column prop="endtime" label="结束时间" />
      <el-table-column prop="expire" label="是否到期" />
      <el-table-column prop="isdel" label="账号是否作废" :formatter="isdelFormatter" />
      <el-table-column label="操作" width="160">
        <template #default="scope">
          <el-button type="info" plain @click="editMember(scope)">编辑</el-button>
          <el-button type="danger" plain @click="delMember(scope)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 编辑会员弹框 -->
    <el-dialog v-model="editMemberVisible" title="编辑会员">
      <el-form :model="editMemberData" :rules="rules">
        <el-form-item label="姓名" :label-width="formLabelWidth" prop="name">
          <el-input autocomplete="off" v-model="editMemberData.name" />
        </el-form-item>
        <el-form-item label="电话" :label-width="formLabelWidth" prop="tel">
          <el-input autocomplete="off" v-model="editMemberData.tel" />
        </el-form-item>
        <el-form-item label="车牌号" :label-width="formLabelWidth" prop="carnumber">
          <el-input autocomplete="off" v-model="editMemberData.carnumber" />
        </el-form-item>
        <el-form-item label="租赁月数" :label-width="formLabelWidth" prop="months">
          <el-input autocomplete="off" v-model="editMemberData.months" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editMemberVisible = false" type="info" plain>取消</el-button>
          <el-button type="info" @click="editMemberFn">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 分页 -->
    <div class="paging">
      <el-pagination v-model:current-page="paging.currentPage" :page-size="10" :pager-count="11"
        layout="prev, pager, next" :total="count" @current-change="changeCurrent" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { getMemberListAPI, addMemberAPI, updateMemberAPI, deleteMemberAPI } from "@/api/member"
import type { ImemberData, ImemberList } from "@/untils/type"
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'

const formLabelWidth = '80px'

let memberData: Array<ImemberList> = reactive<Array<ImemberList>>([]);
let count = ref<number>(0);
let addMemberVisible = ref<boolean>(false);
let editMemberVisible = ref<boolean>(false);
let paging = reactive({
  currentPage: 1,
  pageSize: 10
})
let addMemberData = reactive({
  name: '',
  tel: '',
  carnumber: '',
  months: null,
})
let rules = reactive({
  name: [
    { required: true, message: '请输入姓名', trigger: 'blur' },
  ],
  tel: [
    { required: true, message: '请输入电话', trigger: 'blur' },
  ],
  carnumber: [
    { required: true, message: '请输入车牌号', trigger: 'blur' },
  ],
  months: [
    { required: true, message: '请输入租赁月数', trigger: 'blur' },
  ],
})
let editMemberData = reactive({
  id: '',
  name: '',
  tel: '',
  carnumber: '',
  months: null,
})
let searchData = reactive({
  carnumber: '',
  tel: ''
})

//格式化数据  账号是否作废
function isdelFormatter(row: any) {
  // console.log(row);
  if (row.isdel == 1) {
    return '是';
  }
  if (row.isdel == 0) {
    return '否';
  }
}

// 获取会员列表
const loadMemberList = (data?: ImemberData) => {
  getMemberListAPI({ ...data }).then((res: any) => {
    // console.log(res);
    if (res.code == 2000) {
      memberData.splice(0, memberData.length, ...res.data);
      count.value = res.total;
    }
  })
}
loadMemberList();

// 分页
function changeCurrent() {
  loadMemberList(paging)
}

// 新增会员
function addMemberFn() {
  // console.log(addMemberData);
  addMemberAPI(addMemberData).then((res: any) => {
    console.log(res);
    if (res.code == 2000) {
      loadMemberList();
      addMemberData.name = '';
      addMemberData.tel = '';
      addMemberData.carnumber = '';
      addMemberData.months = null;
    }
  })
}

//编辑会员
function editMember(scope: any) {
  editMemberVisible.value = true;
  editMemberData.id = scope.row.id;
  editMemberData.name = scope.row.name;
  editMemberData.tel = scope.row.tel;
  editMemberData.carnumber = scope.row.carnumber;
  editMemberData.months = scope.row.months;
}

// 修改会员数据
function editMemberFn() {
  updateMemberAPI({
    ...editMemberData
  }).then((res: any) => {
    // console.log(res);
    if (res.code == 2000) {
      ElMessage({
        showClose: true,
        message: res.msg,
      })
      loadMemberList();
    }
  })
  editMemberVisible.value = false;
}

// 删除会员
function delMember(scope: any) {
  deleteMemberAPI({
    id: scope.row.id
  }).then((res: any) => {
    console.log(res);
    if (res.code == 2000) {
      ElMessage({
        showClose: true,
        message: res.msg,
      })
      loadMemberList();
    }
  })
}

// 搜索
function searchFn() {
  loadMemberList(searchData);
}
</script>

<style lang="less" scoped>
.member_box {
  width: 100%;
  height: 100%;

  .member_btn {
    margin: 15px 0;
  }

  .paging {
    width: 100%;
    height: 70px;
    display: flex;
    justify-content: center;
  }
}
</style>